<template>
  <div class="dialogBox" :msg="msg">
    <div class="cover" v-show="showCover"></div>
    <transition name="slide">
      <div class="window" v-show="show">
        <img src="../common/imgs/dangerous.png" class="width100" alt="提示">
        <h3 class="title textCenter">{{title}}</h3>
        <span class="toastText">
          {{reminderInfo}}
        </span>
       <div class="setting">
         <button class="yellowbtn sure" @click.stop="callback">确认</button>
          <button class="cancel" @click.stop="hide">取消</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
    export default {
        name: "dangeDialog",
        data(){
            return{
                introduce:'危险提示-会话弹窗',
                title:'风险提示',
                show:false,
                showCover:false,
                reminderInfo:'',
                timeout:'',//定时器
            }
        },
        props: {
            'msg': {
                /*组件中配置的提示文字*/
                type: String,
                default: '提示文字'
            },
        },
        mounted() {
          console.log('危险提示弹窗')
          this.reminderInfo = this.msg ? this.msg  : '提示文字';
          this.$emit('success');
        },
        methods:{
            changeToast(mes){
              //动态改变提示信息
              // this.$refs.dl.changeToast('aaaa');
              if( mes ){
                this.reminderInfo = mes;
              }
            },
            callback(){
                /*点击确定*/
                this.hide();
                this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
            },
            hide(){
                /*隐藏弹窗*/
                let thiz = this;
                this.show = false;
                thiz.timeout = setTimeout(function () {
                    thiz.showCover = false;
                    clearTimeout(thiz.timeout);
                    thiz.timeout = null;
                },200);
               // thiz.canScroll();/*关闭弹窗，让页面可以上下移动*/
            },
            dialogShow(){
                /*显示弹窗*/
                this.show = true;
                this.showCover = true;
                //this.noScroll();/*显示弹窗，让页面无法上下移动*/
            }
        },
        destroyed() {
            this.hide();
            let thiz = this;
            clearTimeout(thiz.timeout);
            thiz.timeout = null;
        }
    }
</script>

<style type="text/less" lang="less" scoped>
  .window{
      .title{
        font-size: 0.3rem;padding: 0 0.52rem;padding-top: 0.42rem;padding-bottom: 0.2rem;color: #262626;font-weight: 600;
      }
      .toastText{
        text-align: left;font-size: 0.32rem;display: block;line-height: 190%;display: inline-block;width: 100%;min-height: 2.5rem;
        padding: 0 0.3rem;font-size: 0.24rem;color: #595959;padding-bottom: 0.4rem;
      }
      .setting{
        text-align: center;width:100%;background: #fff;z-index: 1;padding: 0 0.3rem;padding-bottom: 0.1rem;
        button{
          margin: 0;font-size: 0.28rem;display: inline-block;width: auto;line-height: 100%;height: 0.7rem;
          border-radius: 0.08rem;box-sizing: border-box;border: 0.02rem solid#FFD203;margin:0;
          width:100%;
        }
       .cancel{
        background: #fff;color: #636363;border: 0;margin-left: 0;margin-right: 0.24rem;
        }
      }
  }
  /*动画*/
  .window{
    width: calc( 100% - 2.41rem );height:auto;position: fixed;
    top:50%;left: 1.205rem;background: #fff;border-radius: 0.1rem;overflow: hidden;z-index: 6;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  @media screen and (min-width: 1025px) {
    .window{width:  424px;left: 50%;margin-left:-212px;}
  }
  .slide-enter-active {
    animation-name: slideInUp;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  .slide-leave-active {
    animation-name: slideOutDown;
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }
  @keyframes slideInUp {
    0% {
      transform: translate3d(0, -100%, 0) translateY(-50%) rotateX(-90deg);
      visibility: visible;
      opacity: 0;
    }
    to {
      transform: translateZ(0) translateY(-50%) rotateX(0deg);
      opacity: 1;
    }
  }
  @keyframes slideOutDown {
    0% {
      transform: translateZ(0) translateY(-50%)  rotateX(0deg);
      opacity: 1;
    }
    to {
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -100%, 0) translateY(-50%)  rotateX(-90deg);
    }
  }
  .delay-leave-active {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
</style>
